<template>
    <div>
        <h1>toRefs的使用</h1>
        <h2>可以将reactive包裹的对象变成普通对象、该对象的每一个property都是一个ref</h2>
        <h3>name:{{name}}</h3>
        <h3>age:{{age}}</h3>
    </div>
    
</template>
<script lang="ts">
import {defineComponent, onBeforeMount, onMounted, reactive, ref , toRefs} from 'vue'

export default defineComponent({
    name:"建哥",
    setup() {
        const state = reactive({
            name:"建哥",
            age:47
        })
        const state2 = toRefs(state)
        


        setInterval(()=>{
            state2.name.value += "====";
            state2.age.value += 1
        },2000)

        
        return {
            ...state2
        }
    },
    directives:{
        jian(el,bind){
            console.log(el,bind);
        }
    }
})

</script>
